<template>
  <!-- 商家组件 -->
  <div class="seller">
    <div class="titleBox">
      <div class="topBox clearfix">
        <div class="leftBox fl">
          <span class="name">{{sellerData.name}}</span>
          <star :score="sellerData.score" :size="36"></star>
          <span class="sellCount">({{sellerData.sellCount}})</span>
          <span class="sellCount">月售{{sellerData.sellCount}}单</span>
        </div>
        <div class="rightBox fr" @click="isCollection = !isCollection">
          <i class="icon icon-favorite" :class="{active: isCollection}"></i>
          <span class="tt">{{isCollection ? '已收藏' : '收藏'}}</span>
        </div>
      </div>
      <div class="bottomBox">
        <div class="item">
          <span>起送价</span>
          <span>{{sellerData.minPrice}}</span>
          <span>元</span>
        </div>
        <div class="item">
          <span>商家配送</span>
          <span>{{sellerData.deliveryPrice}}</span>
          <span>元</span>
        </div>
        <div class="item">
          <span>平均配送时间</span>
          <span>{{sellerData.deliveryTime}}</span>
          <span>分钟</span>
        </div>
      </div>
    </div>
    <divider></divider>
    <div class="bulletinBox">
      <div class="title">公告与活动</div>
      <div class="bulletin">
        {{sellerData.bulletin}}
      </div>
      <div class="supports">
        <div class="item" v-for="(item, index) in sellerData.supports" :key="index">
          <span class="icon" :class="classMap[item.type]"></span>
          <span class="tt">{{item.description}}</span>
        </div>
      </div>
    </div>
    <divider></divider>
    <!-- 商家实景 -->
    <div class="picsBox">
      <div class="title">商家实景</div>
      <scroll-view scroll-x style="width: 750rpx; height: 180rpx;" class="picsImgs">
        <img class="imgItem" :src="picsItem" v-for="(picsItem, picsIndex) in sellerData.pics" :key="picsIndex">
      </scroll-view>
    </div>
    <divider></divider>
    <div class="picsBox infosBox">
      <div class="title">商家信息</div>
      <div class="info">
        <span class="infosItem" v-for="(infosItem, infosIndex) in sellerData.infos" :key="infosIndex">{{infosItem}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import star from './star.vue' // 引入评星组件
  import divider from './divider.vue' // 引入分割线组件
  export default {
    data() {
      return {
        isCollection: false, // 是否收藏
        classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee'] // 优惠图标
      }
    },
    props: {
      sellerData: { // 商家数据
        type: Array,
        required: true
      }
    },
    components: { // 注册组件
      star,
      divider
    }
  }
</script>

<style lang="sass" scope>
.seller
  width: 750rpx
  height: 100%
  .titleBox
    .topBox
      margin: 0 36rpx
      padding-bottom: 36rpx
      border-bottom: 1rpx solid rgba(7, 17, 27, 0.1)
      .leftBox
        font-size: 0
        .name
          display: block
          margin: 36rpx 0 16rpx 0
          font-size: 28rpx
          line-height: 38rpx
          color: rgb(7, 17, 27)
        .sellCount
          display: inline-block
          font-size: 20rpx
          line-height: 36rpx
          color: rgba(77, 85, 93, 1)
          vertical-align: top
          &:nth-of-type(2)
            margin-left: 16rpx
          &:nth-of-type(3)
            margin-left: 24rpx
      .rightBox
        margin-top: 40rpx
        width: 60rpx
        text-align: center
        font-size: 0
        .icon
          font-size: 48rpx
          line-height: 48rpx
          color: #ccc
          transition: color 0.2s
          &.active
            color: rgba(240, 20, 20, 1)
        .tt
          display: inline-block
          margin-top: 8rpx
          font-size: 20rpx
          line-height: 20rpx
          color: rgba(77, 85, 93, 1)
    .bottomBox
      display: flex
      padding: 36rpx 0
      width: 750rpx
      text-align: center
      .item
        flex: 1
        & > span
          &:nth-of-type(1)
            display: block
            margin-bottom: 8rpx
            font-size: 20rpx
            line-height: 20rpx
            color: rgba(147, 153, 159, 1)
          &:nth-of-type(2)
            font-size: 48rpx
            font-weight: 200
            line-height: 48rpx
            color: rgba(7, 17, 27, 1)
          &:nth-of-type(3)
            font-size: 20rpx
            font-weight: 200
            line-height: 20rpx
            color: rgba(7, 17, 27, 1)
        &:nth-of-type(2), &:nth-of-type(3)
          border-left: 1rpx solid rgba(7, 17, 27, 0.1)
  .bulletinBox
    margin: 36rpx 36rpx 0
    .title
      font-size: 28rpx
      line-height: 28rpx
      color: rgba(7, 12, 27, 1)
    .bulletin
      padding: 16rpx 24rpx 36rpx
      text-align: justify
      font-size: 24rpx
      font-weight: 200
      line-height: 48rpx
      color: rgba(240, 20, 20, 1)
    .supports
      .item
        padding: 32rpx 24rpx
        border-top: 1rpx solid rgba(7, 17, 27, 0.1)
        font-size: 0
        .icon
          display: inline-block
          margin-right: 12rpx
          width: 32rpx
          height: 32rpx // 'decrease', 'discount', 'invoice', 'guarantee', 'special'
          &.decrease
            background: url('../../static/images/decrease_3@3x.png') no-repeat
            background-size: 100% auto
          &.discount
            background: url('../../static/images/discount_3@3x.png') no-repeat
            background-size: 100% auto
          &.invoice
            background: url('../../static/images/invoice_3@3x.png') no-repeat
            background-size: 100% auto
          &.guarantee
            background: url('../../static/images/guarantee_3@3x.png') no-repeat
            background-size: 100% auto
          &.special
            background: url('../../static/images/special_3@3x.png') no-repeat
            background-size: 100% auto
        .tt
          vertical-align: top
          font-size: 24rpx
          font-weight: 200
          line-height: 32rpx
          color: rgba(7, 17, 27, 1)
  .picsBox
    margin: 36rpx 0  36rpx 36rpx
    .title
      font-size: 28rpx
      line-height: 28rpx
      color: rgba(7, 12, 27, 1)
    .picsImgs
      margin-top: 24rpx
      .imgItem
        margin-right: 12rpx
        width: 240rpx
        height: 180rpx
    .info
      margin-top: 24rpx
      .infosItem
        display: inline-block
        padding: 32rpx 24rpx
        width: 100%
        font-size: 24rpx
        font-weight: 200
        line-height: 32rpx
        color: rgba(7, 17, 27, 1)
        border-top: 1rpx solid rgba(7, 17, 27, 0.1)
  .infosBox
    margin: 36rpx
    overflow: hidden
</style>
